<template>
	<view class="container">
		<view class="info-box primary-bg">
			<button open-type="getUserInfo" class="avatar">
				<open-data type='userAvatarUrl' class="userinfo" mode="cover"></open-data>
			</button>
			<view class="user-info">
				<view class="username text-white">{{userInfo.nickname}}</view>
				<view class="tips-txt">{{userInfo && userInfo.is_member ? '欢迎回来，去运动吧！' : '欢迎来到驷动健身，你还不是会员'}}</view>
			</view>
		</view>
		<view class="list-container">
			<navigator url="/pages/member_card_order/list">
				<view class="primary-bg i-list-item">
					<image class="i-icon i-icon-order" src="../../static/image/icon-order.png" mode="aspectFit"></image>
					<text class="i-title">会员卡订单</text>
					<view class="i-icon i-icon-arrow-r">›</view>
				</view>
			</navigator>
			<navigator url="/pages/coach_order/list">
				<view class="primary-bg i-list-item">
					<image class="i-icon i-icon-order" src="../../static/image/icon-coach-order.png" mode="aspectFit"></image>
					<text class="i-title">私教订单</text>
					<view class="i-icon i-icon-arrow-r">›</view>
				</view>
			</navigator>
			<navigator url="/pages/group_course_order/list">
				<view class="primary-bg i-list-item">
					<image class="i-icon i-icon-order" src="../../static/image/icon-group-course.png" mode="aspectFit"></image>
					<text class="i-title">我的团课</text>
					<view class="i-icon i-icon-arrow-r">›</view>
				</view>
			</navigator>
			<view class="primary-bg i-list-item">
				<image class="i-icon i-icon-card" src="../../static/image/icon-card.png" mode="aspectFit"></image>
				<text class="i-title">会员权益</text>
				<view class="i-icon i-icon-arrow-r">›</view>
			</view>
			<button open-type="contact" class="primary-bg i-list-item">
				<image class="i-icon i-icon-service" src="../../static/image/icon-service.png" mode="aspectFit"></image>
				<text class="i-title">联系客服</text>
				<view class="i-icon i-icon-arrow-r" style="margin-right: 56upx;margin-top: -42upx;">›</view>
			</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: null
		}
	},
	onLoad() {
		const userInfo = uni.getStorageSync('user_info');
		this.userInfo = userInfo;
	}
}
</script>

<style>
	page {
		background: #232529;
		color: #FFFFFF;
	}
</style>
<style scoped lang="less">
	.container {
		.info-box {
			height: 150upx;
			margin: 20upx 0;
			padding-left: 20upx;
			display: flex;
			.avatar {
				margin: 0;
				padding: 0;
				background: none;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-right: 20upx;
				.userinfo{
				    width:100upx;
				    height: 100upx;
				    border-radius: 50%;
				    display:flex;
				    overflow: hidden;
				}
			}
			.user-info {
				height: 80upx;
				display: flex;
				flex-direction: column;
				.username {
					margin-top: 45upx;
					margin-bottom: 10upx;
				}
			}
		}
		
		.list-container {
			.i-list-item {
				display: flex;
				align-items: center;
				height: 132upx;
				padding-left: 40upx;
				border-bottom: 2px solid #2c2f35;
				&:last-child {
					border-bottom: none;
				}
			}
			.i-icon {
				width: 60upx;
				height: 60upx;
				margin-right: 50upx;
				&.i-icon-order {
					
				}
				&.i-icon-arrow-r {
					flex: 1;
					text-align: right;
					color: #939496;
					font-size: 40upx;
					margin-right: 80upx;
					font-weight: bold;
				}
			}
			.i-title {
				color: #939496;
				font-size: 32upx;
			}
		}
	}
</style>
